<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: palevioletred;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
<script>
  // 操作修改对象样式   对象.style.样式属性=值
  // 比如：
  // const box = document.querySelector('.box')
  // 修改样式
  // box.style.width = '200px'
  // box.style.marginTop = '200px'
  // box.style.backgroundcolor = '200px'
  // ...

  // 案例
  // 通过style操作元素样式
  // 1.获取box元素对象
  const box = document.querySelector(".box");
  // 2.通过style操作修改样式
  box.style.width = "400px";
  box.style.height = "400px";
  // box.style.background-color = 'red'
  box.style.backgroundColor = "green";
  // 3.注意事项
  // 3.1所有元素修改样式必须添加   对象.style.样式属性=值
  // 3.2所有需要加单位的属性值必须加单位
  // 3.3所有样式中横岗 - 链接的单位属性 是因为不能用变量命名，所有用小驼峰命名来写
  //     background-color 不能这样写，应该是  backgroundColor
</script>
